<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script type="text/javascript">
			document.write('<script src="../../js/fix.js?rd=?rd=' + Math.random() + '"><\/script>');
		</script>
		<script type="text/javascript">
			link(['../../css/font-awesome.min.css', '../../fonts/iconfont/iconfont.css']);
		</script>
		<script type="text/javascript">
			script(['../../js/PinYinUti.js', "../../js/H5+.js"]);
		</script>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			html,
			body {
				background: #f8f8f8;
			}



			.searchinfo {
				width: 100%;
				background: #47BAFE;
				/* box-shadow:0 1px 2px 0 rgb(229, 240, 253), 0 2px 10px 0 rgb(229, 240, 253); */
				height: 0.6rem;
				color: #FFFFFF;
				/* background-color: #fff; */
				display: flex;
				align-items: center;
				/* justify-content: center; */
				padding-left: 0.1rem;
				position: fixed;
			}

			.mui-content .mui-indexed-list-search {
				width: 85%;
				height: 0.6rem;
				line-height: 0.6rem;
				border: 0;
				display: flex;
				align-items: center;
				color: #a6bfcd;
				border-radius: 0.05rem !important;
				z-index: 0;
			}


			.mui-indexed-list-search .mui-placeholder span:last-child {
				font-size: 0.16rem;
				margin-left: 0.05rem
			}

			.mui-content .mui-indexed-list-search .mui-placeholder,
			.mui-content .mui-indexed-list-search .mui-icon-search {
				color: #999;
				font-size: 0.24rem;
			}

			#inpt {
				padding-left: 0.4rem;
				border-radius: 0.05rem !important;
				height: 0.4rem;
				font-size: 0.18rem;

			}

			.mui-search .mui-placeholder {
				height: 0.6rem;
				line-height: 0.6rem;
				text-align: left !important;
				padding-left: 0.1rem;
				font-size: 0.18rem;
			}

			.mui-search:before {
				height: 0.35rem !important;
				line-height: 0.4rem;
				font-size: 0.24rem !important;
				padding-left: 0.1rem;
				transform: translateX(-0.05rem);
			}



			.mui-input-row.mui-search .mui-icon-clear {
				line-height: 0.42rem;
				height: 0.42rem;
			}

			.mui-indexed-list-search input {
				background-color: #f8f8f8;
				border-radius: 0px !important;
				color: #a6bfcd;
				margin: 0;
				padding: 0rem;

			}

			.sorticon {
				text-align: center;
				display: inline-block;
				height: 0.5rem;
				line-height: 0.5rem;
				width: 15%;
				font-size: 24px;
			}



			.mui-content .linkman {
				background-color: #fff;
				margin-top: 0.4rem;
				width: 100%;
			}

			.mui-content .linkman .gehe {
				width: 100%;
				height: 0.1rem;
				background-color: #e9f0f4;
				position: fixed;
			}

			.mui-content .linkman .head {
				width: 100%;
				height: 0.45rem;
				line-height: 0.45rem;
				color: #47BAFE;
				display: flex;
				justify-content: center;
				position: fixed;
				/* top: 1rem; */
				z-index: 111;
				background-color: #fff;
				border-bottom: 0.01rem solid #c0d3df;
			}

			.mui-content .linkman .head span {
				text-align: center;
				flex: 1;
				overflow: hidden;
				position: relative;
			}

			.mui-content .linkman .head span p {
				display: inline-block;
				width: 0.07rem;
				height: 0.05rem;
				background: url(../../images/xxia.png) no-repeat;

				background-size: 100% 100%;
				margin: 0;
			}


			/* 	.mui-content .linkman ul li div {
				display: flex;
				align-items: center;
			} */
			.ulList {
				list-style: none;
				padding-top: 0.2rem;
				background: #f8f8f8;
				display: block;
			}

			.removeDiv {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0rem;
				left: 0rem;
				background-color: rgba(210, 210, 210, 0.15);
				transform: translateX(-100%);
				-webkit-transform: translateZ(-100);
				-webkit-perspective: 1000;
				-webkit-backface-visibility: hidden;
				transition: transform .3s;
				border-radius: 15px;
			}

			.removeDiv2 {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0rem;
				left: 0rem;
				background-color: rgba(210, 210, 210, 0);
				border-radius: 10px;
			}

			.removeDiv2 .iconxuanzhong4 {
				font-size: 0.4rem;
				text-align: right;
			   height: 0.4rem;
			   line-height: 0.4rem;
				color: #47BAFE;
			}

			.ulList li {
				background: #FFFFFF;
				border-radius: 13px;
				box-sizing: border-box !important;
				position: relative;
				overflow: hidden;
				transition: background-color .5s;
                  height: 0.8rem;
				  border: none;
				  margin-bottom: 0.05rem;
			}




			.ulList li #customername {
				overflow: hidden;
				display: inline-block;
				vertical-align: middle;
				width: calc(100% - 0.2rem);
				text-overflow: ellipsis;
				white-space: nowrap;
				height: 0.3rem;
				color: #545454;
				margin: 0rem;
				line-height: 0.3rem;
				font-weight: bold;
			}


	

				.col-left img{
					vertical-align: middle;
					width: 0.6rem !important;
				}
	         .col-left{
				 width: 0.8rem;
				 display: inline-block;
				 text-align: center;
				 height: 0.8rem;
				 line-height: 0.8rem;
			 }
			 .col-center{
				 display: inline-block;
				 width: calc(100% - 1.8rem);
				 height: 0.6rem;
				 vertical-align: middle;
				 /* margin-top: 0.1rem; */
			 }
			  .col-center p:last-child{
				  font-size: 0.13rem;
			  }
			  .col-center p{
				  height: 0.3rem;
				  line-height: 0.3rem;
				  margin: 0rem;
			  }
			 .col-right{
				 width: 0.8rem;
				 box-sizing: content-box;
				 display: inline-block;
				 height: 0.6rem;
				 vertical-align: middle;
			 }
			  .col-right p:first-child{
				  background: #E3E3E3;
				  border-bottom: none;
				  color: #999;
				  font-size: 0.14rem;
				  height: 0.25rem;
				  line-height: 0.25rem;
				 text-align: center;
				 border-radius: 0rem;
			  }
			 .col-right p{
				 margin: 0rem;
				 width: 0.8rem;
				 line-height: 0.33rem;
				 height: 0.35rem;
				 font-size: 0.14rem;
				 border:1px solid #EEEEEE;
				 text-align: center;
				 font-size: 0.13rem;
				 color: #47BAFE;
				 border-radius: 0rem 0rem 50% 50%;
			 }

			.col-bottom .last_touch_date {
				width: calc(100% - 0.5rem);
				display: inline-block;
				padding-left: 0.05rem;
				color: #9C9C9C;
			}

			.col-bottom>span {
				float: right;
				/* padding-right: 0.05rem; */
				font-size: 0.25rem;
				color: #47BAFE;
				padding-bottom: 0.05rem;
				/* transform: translateY(-0.1rem); */
			}

			.col-bottom>p {
				font-size: 0.13rem;
				margin: 0rem;
			}

			.mui-content .linkman ul li div .touxiang img {
				height: 0.34rem;
				border-radius: 17px;
				margin-top: 0.06rem;
			}

			.mui-content .linkman ul li div .star img {
				width: 0.15rem;
				height: 0.15rem;
				margin-top: 0.02rem;
			}


			#topPopover {
				position: fixed;
				top: 0.5rem;
				width: 1.5rem;
				right: 0px;
				height: 1rem;
				right: 0.15rem;
				z-index: 1002;
				display: none;
				margin-right: -0.05rem;
			}

			#topPopover:before {
				content: '';
				width: 0;
				height: 0;
				border: 0.1rem solid transparent;
				/*调整小三角形的大小*/
				border-bottom-color: white;
				position: absolute;
				right: 0.1rem;
				/*调整小三角形的位置*/
				bottom: 100%;
				/*调整小三角形的位置*/
				margin-top: 0.2rem;
				/*调整小三角形的位置*/

			}

			#topPopover .mui-scroll-wrapper {
				margin-top: 0.05rem;
			}

			.mui-popover.mui-active {
				width: 1.4rem;
				background-color: white;
				display: block;
				top: 0.5rem !important;
			}

			#topPopover .mui-scroll li span {
				margin-right: 0.1rem;
			}

			#topPopover .more_ul:before,
			.more_ul:after {
				background: none;
			}

			#topPopover .more_ul {
				border-radius: 10px;
				overflow: hidden;
			}

			#topPopover .more_ul li {
				padding: 0px;
				border: none;
				padding-left: 0.2rem;
				padding-top: 0.04rem;
				height: 0.45rem;
				line-height: 0.45rem;
			}

			.mui-hidden {
				z-index: 1;
			}

			.line {
				display: inline-block;
				width: 0.15rem;
				height: 0.15rem;
				border-radius: 15px;
				background-color: #4b9cdb;
			}

			.ring-1 {
				width: 0.1rem;
				height: 0.1rem;
				margin: 0 auto;
				padding: 0.1rem;
				border: 0.07rem dashed #4b9cdb;
				border-radius: 100%;
			}



			.ball-holder {
				position: absolute;
				width: 0.12rem;
				height: 0.45rem;
				left: 0.17rem;
				top: 0px;
			}

			.load-1 .line:nth-last-child(1) {
				animation: loadingA 1.5s 1s infinite;
			}

			.load-1 .line:nth-last-child(2) {
				animation: loadingA 1.5s .5s infinite;
			}

			.load-1 .line:nth-last-child(3) {
				animation: loadingA 1.5s 0s infinite;
			}


			@keyframes loadingA {
				0 {
					height: 0.15rem;
				}

				50% {
					height: 0.35rem;
				}

				100% {
					height: 0.15rem;
				}
			}

			#loading {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.mask {
				position: fixed;
				width: 100vw;
				height: 100vh;
				background-color: rgba(0, 0, 0, 0.3);
				z-index: 1001;
				top: 0.44rem;
				display: none;
			}


			.mui-content-padded {
				margin: 0px;
				box-shadow: none;
				padding: 0rem;

			}

			.mui-content .point_box {
				padding: 0px 0.1rem;
				/* position: absolute; */
				box-sizing: border-box;
				border: 1px solid #eee;
				width: 90%;
				margin-left: 5%;
				margin-top: 0.1rem;
				border-radius: 5px;
				background: #fafafa;
				/* box-shadow: 0px 0px 0.15rem -0.05rem #47bafe; */
			}

			#telImp,
			#wxImp {
				padding: 0.13rem;
				font-size: 0.2rem;
			}

			.point_box p {
				text-align: left;
				font-size: 0.15rem;
				margin-bottom: 0.05rem;
				line-height: 0.24rem;
			}

			.actionButton {
				line-height: 0.22rem;
			}

			.paixubox {
				height: 1.35rem;
				position: fixed;
				top: 0.6rem;
				transform: translateY(-2rem);
				width: 100%;
				background: #FFFFFF;
				z-index: 1;
				overflow: hidden;
				transition: all .2s;
			}

			.paixubox p {
				height: 0.45rem;
				line-height: 0.45rem;
				margin: 0rem;
				color: black;
				padding: 0rem 0.2rem;
				border-bottom: 0.01rem solid #EEEEEE;
			}

			.paixubox p:active {
				color: #47BAFE !important;
			}

			.paixubox p:last-child {
				border: none;
			}

			.paixuboxShow {
				overflow: auto !important;
			}


			.jiantoufh {
				animation: xuanzicon .2s;
				animation-iteration-count: 1;
				/* 规定动画无限次执行 */
				animation-timing-function: linear;
				transform: rotate(180deg);

			}

			.jiantoufh2 {

				animation: xuanzicon2 .2s;
				animation-iteration-count: 1;
				/* 规定动画无限次执行 */
				animation-timing-function: linear;

			}

			@keyframes xuanzicon2 {
				from {

					transform: rotate(180deg);
				}

				to {

					transform: rotate(0deg);
				}
			}

			@keyframes xuanzicon {
				from {

					transform: rotate(0deg);
				}

				to {

					transform: rotate(180deg);
				}
			}

			.paixuspan {
				width: 40% !important;
				color: #999999;
				display: inline-block;
			}

			.detelebox {
				display: inline-block;
				width: 50%;
				text-align: right;
				color: #999999;
				padding-right: 5%;
				border-left: .5px solid #EEEEEE;
			}

			.detelebox span {
				padding: 0px 0.1rem;
			}

			.detelebox span:last-child {
				font-size: 0.3rem;
				height: 0.5rem;
				line-height: 0.5rem;
				vertical-align: middle;
			}

			#paixutext {
				width: 50% !important;
				overflow: hidden;
				display: inline-block;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
			}

			#jiantoufh {
				display: inline-block;
				padding: 0rem 0.2rem;
			}


			#mask2 {
				z-index: 0;
			}

			.head {
				position: relative;
				z-index: 111;
			}

			.mui-icon-clear {
				margin: 0rem;
				margin-top: 0.02rem;
			}


			@keyframes removeliam {
				0% {
					transform: rotate(2deg);
				}

				25% {
					transform: rotate(-2deg);
				}

				50% {
					transform: rotate(2deg);
				}

				75% {
					transform: rotate(-2deg);
				}

				100% {
					transform: rotate(2deg);
				}

			}

			.mui-popup-button:first-child {
				color: #47BAFE;
			}

			.mui-popup-button-bold {
				color: #47BAFE !important;
			}

			#batch_handle_box {
				flex-flow: wrap;
				position: fixed;
				bottom: 0.15rem;
				width: 96%;
				background: #47BAFE;
				z-index: 111;
				padding: 0.05rem 0rem;
				/* border:1px solid #F8F8F8; */
				box-shadow: 0 15px 10px 0 rgb(150, 210, 245, 0.4), 0 15px 10px 0 rgb(177, 189, 195, 0.4);
				left: 2%;
				border-radius: 10px;
				display: none;

			}

			#batch_handle_box div {
				flex: 1;
				text-align: center;
				border-right: .5px solid #F8F8F8;
			}

			#batch_handle_box div:last-child {
				border: none;
			}

			#batch_handle_box div p {
				height: 0.27rem;
				margin: 0rem;
				line-height: 0.27rem;
				font-size: 0.13rem;
				color: #FFFFFF;
			}

			#batch_handle_box div p:first-child {
				font-size: 0.25rem;
				color: #FFFFFF;
			}

			#batch_handle_box .tipXZ {
				color: #FFFFFF;
				height: 0.5rem;
				line-height: 0.5rem;
				width: 1.5rem;
			}

			#batch_handle_box .tipXZ span {
				display: block;
				height: 0.25rem;
				line-height: 0.25rem;
			}
		</style>
	</head>

	<body>

		<div class="mask" id="mask"></div>

		<div id="zanwushuju" class="mui-content" style=" background-color: #FFFFFF; height: 100vh;padding-top:60px;display: none;">
	   <p>暂无客户</p>
		</div>

		<div class="mui-content" id="pullrefresh" >
			<div class="searchinfo" style="top:0rem;z-index: 100;;">
		<!-- 	<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">增员小助理</h1>
			</header> -->
			<div class="mui-indexed-list-search mui-input-row mui-search">
				<input id="inpt" type="search" class=" mui-indexed-list-search-input  mui-input-clear" placeholder="搜索客户">
			</div>
			<div class="iconfont sorticon " pxtext="排序" id="paixuspan">&#xe6c6;</div>
		</div>


			<div class="linkman">
				<div class="gehe"></div>
				<div style="position: relative;">
					<div class="paixubox " id="paixubox">
						<p id="time"style="color: #47BAFE;">最近互动</p>
						<p id="name">姓名</p>
						<p id="lingbao" >增员潜力</p>
					</div>
					<ul class="ulList" id="users"></ul>
					<p id="noList_data" style="display: none;text-align: center;background: #f8f8f8;height: 0.4rem;line-height: 0.4rem;">没有更多客户信息了</p>
					<ul class="ulList" id="searchList" style="display: none;padding: 0rem;"></ul>
					<div class="mask" id="mask2"></div>

				</div>
				<div id="loading" class="load-wrapp">
					<div class="load-1">
						<p>Loading...</p>
						<div class="line"></div>
						<div class="line"></div>
						<div class="line"></div>
					</div>
				</div>
			</div>
		</div>

		<!-- 	<div id="topPopover">
			<div class="mui-popover-arrow"></div>
			<ul class="mui-table-view more_ul">
				<li class="mui-table-view-cell" style="color: #c5c5c5;">
					<span class="mui-icon-extra mui-icon-extra-addpeople"></span>
					<span>新增客户</span>
				</li>
				<li class="mui-table-view-cell" id="batch">
					<span class="mui-icon-extra mui-icon-extra-topic"></span>
					<span>批量诊断</span>
				</li>
				<li class="mui-table-view-cell" style="color: #c5c5c5;">
					<span class="mui-icon-extra mui-icon-extra-sweep"></span>
					<span>扫描名片</span>
				</li>
			</ul>

		</div>
 -->

		<!-- 	<script type="text/javascript">
			script(["../../js/mui.indexedlist2.js"]);
		</script> -->
		<!-- <script type="text/javascript">
			script();
		</script> -->
		<script type="text/javascript" src="../../js/app/smart-scroll.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: { //下拉刷新
						callback: pulldownRefresh,
						style: mui.os.android ? "circle" : "default"
					}
				},
				beforeback: function() {
					appPage.closeLogin();
				},
				gestureConfig: {
					longtap: true
				}
			});
			// mui.ready(function() {
			var ws = null,
				wc = null;
			let isLoading_in = false;
			mui.plusReady(function() {
					localStorage.removeItem("customerData");
					getData(parseInt(0));
				ws = plus.webview.currentWebview();
				ws.setStyle({
					scrollIndicator: "none"
				})
				storage.init();
				storageUser = kidstorageuser.getInstance();
			})

	

			function pulldownRefresh() {
				if(isLoading_in==true){
					setTimeout(function(){
						 mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); 
					},1000);
					return;
				}
				//初始化当前页
				// initPage();
				let pxtext = document.getElementById("paixuspan").getAttribute("pxtext");
				if (pxtext == "排序") {
					getData(parseInt(0));
				} else if (pxtext == "姓名") {
					localStorage.removeItem("customerData");
					namepx();
				} else if (pxtext == "增员潜力") {
					getData(parseInt(1));
				} else if (pxtext == "最近互动") {
					getData(parseInt(0));
				}
				// document.getElementById("batch_handle_box").style.display="none";


			}
			window.addEventListener("refreshPage", function() {
				pulldownRefresh();
			});

			function getData(sort) {
				storage.init();
				storageUser = kidstorageuser.getInstance();
				if (sort == 0) {
					sort_name = "last_touch_date"
				} else if (sort == 1) {
					sort_name = "evaluate_score"
				}
				console.log("发起请求时间" + new Date());
				request("/cmdb/queryByCustomerIDTeam/", {
					sales_id: storageUser.UId,
					cust_id: " ",
					sort_name: sort_name,
					is_reverse: "-1"
	
				}, function(data) {
					
					console.log("获取到数据时间" + new Date());
					if (data.DATASET.length == 0) {
						document.getElementById("pullrefresh").style.display = "none";
						document.getElementById("zanwushuju").style.display = "block";
					} else {
						localStorage.setItem("customerData", JSON.stringify(data));
						let keySearchData = localStorage.getItem("keySearchData");
						document.getElementById("zanwushuju").style.display = "none";
						document.getElementById("pullrefresh").style.display = "block";
                     
						var inpt2 = document.getElementById('inpt');
						if (keySearchData != null && inpt2.value != "") { //如果搜索框和搜索的本地数据不为空,则再次调用keySearch方法使用ajax获取的数据进行搜索框筛选渲染
							// data = JSON.parse(keySearchData).DATASET;
							keySearch(data.DATASET);
						} else {
							 if (sort == 1) {
								 data.DATASET.sort(function(a, b) {
									 return a.evaluate_score > b.evaluate_score ? 1:-1;
								 })
								 setData(data, "getData");

							 }else{
								 setData(data, "getData");
							 }
						}
						console.log("渲染结束时间" + new Date());
					}
					// requestJsonFile("../../data/userlist.json", {}, function(request) {
				})

			}
	
			function setData(request, type) { //防止数据过多渲染卡顿,分批渲染,0.16ms渲染一次
				isLoading_in = true;
				console.log("开始渲染");
				let data = request.DATASET;
				// alert(data.length);

				setTimeout(() => {
					// 插入数据
					const total = data.length
					// 一次插入 20 条，如果觉得性能不好就减少
					let once = 20
					// 渲染数据总共需要几次
					const loopCount = total / once
					let countOfRender = 0
					
					if (type == "search") {
						 let ul = document.querySelector("#searchList");
					} else {
						 let ul = document.querySelector("#users");
					}

					ul.innerHTML = "";

					function add() {
						// 优化性能，插入不会造成回流
						const fragment = document.createDocumentFragment();
						if (loopCount <= 1) {
							once = data.length;
						} else if (isXy1 != 0) {
							once = isXy1 * 20;
						} else {
							once = 20;
						}
						for (let j = 0; j < parseInt(once); j++) {
							let i = j + 20 * countOfRender;
							if (data[i].src == "0") {
								name = data[i].phone_nm;
							} else if (data[i].wechat_memo == "" || data[i].wechat_memo == null) {
								name = data[i].wechat_nm;
							} else {
								name = data[i].wechat_memo;
							}
							let img = "../../images/mrtxM.jpg";
							if (data[i].sex == "F") {
								img = "../../images/mrtxF.jpg";
							}

							let lastData;
							if (data[i].last_touch_date == null || data[i].last_touch_date == "" || data[i].last_touch_date == undefined) {
								lastData = "还没有互动";
							} else {
								let todaytime = getNowFormatDate(new Date());
								let today = new Date(todaytime);
								let lastTime = new Date(data[i].last_touch_date);
								let year = parseInt(today.getFullYear() - lastTime.getFullYear());
								let month = parseInt((today.getMonth() + 1) - (lastTime.getMonth() + 1));
								let day = parseInt(today.getDate() - lastTime.getDate());
								if (year == 0 && month == 0 && day >= 7) {
									lastData = parseInt(day / 7) + "星期前互动过";
								} else if (year == 0 && month != 0) {
									lastData = parseInt(month) + "个月前互动过"
								} else if (year != 0) {
									lastData = parseInt(year) + "年前互动过"
								} else if (year == 0 && month == 0 && day > 1 && day < 7) {
									lastData = parseInt(day) + "天前互动过"
								} else if (year == 0 && month == 0 && day == 1) {
									lastData = "昨天互动过"
								} else if (day == 0) {
									lastData = "今天互动过"
								}
							}
						
						
							let evaluate_score="未评估";
							switch (data[i].evaluate_score){
								case "A":
								evaluate_score="高";
									break;
								case "B":
								evaluate_score="中";
									break;
								case "C":
								evaluate_score="低";
									break;
								case "D":
								evaluate_score="未知";
									break;
								default:
								evaluate_score="未评估";
									break;
							}
						
							let li_html = '<div  class="col-left"><img class="p_img" style="width:50px" src="' + img + '"/></div>'+
							'<div class="col-center"><p class="customername" id="customername" >' + name +
								'</p><p class="last_time">' + lastData + '</p></div>' +
								'<div class="col-right"><p>增员潜力</p><p class="E_score">'+evaluate_score+'</p></div>';
							const li = document.createElement("li");
							li.setAttribute("id", data[i].cust_id);
							li.setAttribute("custID", data[i].cust_id);
							li.setAttribute("customername", name);
							li.innerHTML = li_html;
							fragment.appendChild(li)
						}
						ul.appendChild(fragment);
						// console.log(ul.getElementsByTagName("li").length);

						document.getElementById("loading").style.display = "none";
						document.getElementById("users").style.display = "block";
						document.getElementById("noList_data").style.display = "block";
						// ul.innerHTML=fragment;

						   if(loopCount - countOfRender <= 1){
								     isLoading_in = false;
								  mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); 
						   }
						if (countOfRender < loopCount && loopCount-countOfRender>=1) {
							countOfRender += 1;
							loop();
						}
					}
					let isXy1 = 0;
                         
					function loop() {
						if (loopCount - countOfRender < 1) {
							isXy1 = Subtr(loopCount,countOfRender);

							// console.log(isXy1);
						} else {
							isXy1 = 0;
						}
						window.requestAnimationFrame(add);
					}
					add();
				}, 0);
			}

			let ul = document.getElementById("users");
			ul.addEventListener("touchstart", function(e) {
				if (e.target.nodeName == "UL") {
					return;
				}
				var result = [];
				let dom = e.target;
				while (dom.nodeName != "LI") { //获取到指定的祖先li元素
					result.push(dom);
					dom = dom.parentNode;
				}
				const divObj = document.createElement("div");
				divObj.className = "removeDiv";
				dom.appendChild(divObj);
				// dom.style.backgroundColor="rgba(152, 211, 246, 0.87)";
				setTimeout(function() {
					divObj.style.transform = "translateX(0)";
				}, 0);
				setTimeout(function() {
					divObj.remove();
				}, 500)
			})
			ul.addEventListener("tap", function(e) {
				if (e.target.nodeName == "UL") {
					return;
				}
					var result = [];
				let dom = e.target;
				while (dom.nodeName != "LI") { //获取到指定的祖先li元素
					result.push(dom);
					dom = dom.parentNode;
				}
			mui.openWindow({
				url: 'insurance_Art_Detail.html',
				id: 'insurance_Art_Detail.html',
				extras: {
					custId: dom.getAttribute("custID"),
					img:dom.querySelector(".p_img").getAttribute("src"),
					name: dom.querySelector(".customername").innerText,
					time: dom.querySelector(".last_time").innerText,
					score:dom.querySelector(".E_score").innerText
				},
				styles: {
					titleNView: {
						autoBackButton: true,
						backgroundcolor: "#47BAFE",
						titleText: dom.querySelector("#customername").innerText,
						titlecolor: "white",
							buttons: [{
								fontSrc: 'fonts/iconfont/iconfont.ttf',
								float: 'right',
								text: '\ue609',
								// color:'#0075bb',
								fontSize:'28px',
								onclick: "javascript:plus.webview.getWebviewById('insurance_Art_Detail.html').evalJS('saveFrom()');"
							},
									
						]
					},
			
				},
				waiting: {
					autoShow: false
				}
			})
				
			})
		
			//搜索框功能

			var inpt = document.getElementById('inpt');

			inpt.addEventListener("keypress", function(e) {
				if (e.keyCode == 13) {
					inpt.blur();
				}
			})
			

			mui("body").on("tap", ".mui-icon-clear", function() {
				document.getElementById("noList_data").style.display = "block";
				let customerDatass = localStorage.getItem("customerData");
				let px_text = document.getElementById("paixuspan").getAttribute("pxtext");
				if (px_text == "姓名") {
					namepx();
				} else {
					document.getElementById("users").style.display = "block";
					document.getElementById("searchList").style.display = "none";
					setData(JSON.parse(customerDatass), "getData");
				}
				// localStorage.removeItem("keySearchData");
			});
			let nullCount = 0;
			inpt.addEventListener('keyup', function() {
				keySearch(0);
				document.getElementById("noList_data").style.display = "none";
				// render("#users", "userlist", dataarr_parse);
			})

			function keySearch(request) {
				let customerData = localStorage.getItem("customerData");
				let data;
				if (request == 0) {
					data = JSON.parse(customerData).DATASET;
				} else {
					data = request;
				}
				var inval = inpt.value;
				if (inval == "") {
					document.getElementById("noList_data").style.display = "block";
					nullCount += 1;
					if (nullCount >= 2) {
						localStorage.removeItem("keySearchData");
						return;
					} else {
						document.getElementById("users").style.display = "block";
						document.getElementById("searchList").style.display = "none";
					}
				} else {
					nullCount = 0;
				}
				var DATASET = [];
				for (let i = 0; i < data.length; i++) {
					var paraStr = data[i].src == "0" ? data[i].phone_nm : (data[i].wechat_memo == "" || data[i].wechat_memo == null ?
						data[i].wechat_nm : data[i].wechat_memo);
					if (paraStr.toLowerCase().indexOf(inval.toLocaleLowerCase()) >= 0) {
						DATASET.push(data[i]);
					}
				}

				var dataarr_parse = {
					DATASET
				};
				localStorage.setItem("keySearchData", JSON.stringify(dataarr_parse));
				if (document.getElementById("searchList").style.display == "none") {
					document.getElementById("users").style.display = "none";
					document.getElementById("searchList").style.display = "block";
				}

				setData(dataarr_parse, "search");
			}
			var isdj = 0;
			document.getElementById("paixuspan").addEventListener("tap", function() {
				// alert(isLoading_in);
				if (isLoading_in == true) {
					return;
				}
				if (isdj == 0) {
					document.getElementById("paixubox").style.transform = "translateY(0rem)";
					document.getElementById("mask2").style.display = "block";
					isdj = 1;
				} else {
					document.getElementById("paixubox").style.transform = "translateY(-2rem)";
					setTimeout(function() {
						document.getElementById("mask2").style.display = "none";
					}, 200);

					isdj = 0;
				}

			})
			let pbq = document.getElementById("paixubox").querySelectorAll("p");
			for (let i = 0; i < pbq.length; i++) {
				pbq[i].addEventListener("tap", function() {
					document.getElementById("noList_data").style.display = "none";
					isLoading_in = true;
					document.getElementById("paixubox").style.transform = "translateY(-2rem)";
					isdj = 0;
					document.getElementById("users").style.display = "none";
					document.getElementById("loading").style.display = "block";
					document.getElementById("name").style.color = "black";
					document.getElementById("lingbao").style.color = "black";
					document.getElementById("time").style.color = "black";
					document.getElementById("mask2").style.display = "none";
					if (pbq[i].innerText == "增员潜力") {
						document.getElementById("lingbao").style.color = "#47BAFE";
						setTimeout(function() {
							getData(parseInt(1));
						}, 200);
					} else if (pbq[i].innerText == "最近互动") {
						document.getElementById("time").style.color = "#47BAFE";
						setTimeout(function() {
							getData(parseInt(0));
						}, 200);
					} else if (pbq[i].innerText == "姓名") {
						document.getElementById("name").style.color = "#47BAFE";
						setTimeout(function() {
							namepx();
						}, 200);
					}
					document.getElementById("paixuspan").setAttribute("pxtext", pbq[i].innerText)

				});
			}
			//名字排序
			function namepx() {
				let customerData = localStorage.getItem("customerData");
				if (customerData != "" && customerData != undefined && customerData != null) {
					// DATASET= JSON.parse(customerData).DATASET;
					setTimeout(function(){
						sortName(JSON.parse(customerData).DATASET);
					},300);
				} else {
					storage.init();
					storageUser = kidstorageuser.getInstance();
					request("/cmdb/queryByCustomerIDTeam/", {
						sales_id: storageUser.UId,
						cust_id: " ",
						sort_name: "evaluate_score",
						is_reverse: "-1"
					}, function(request) {
						localStorage.setItem("customerData", JSON.stringify(request));
						sortName(request.DATASET)
					})
				}


			}

			function sortName(DATASET) {
				DATASET.sort(function(a, b) {
					let name1;
					if (a.src == "0") {
						name1 = a.phone_nm
					} else if (a.wechat_memo == "" || a.wechat_memo == null) {
						name1 = a.wechat_nm
					} else {
						name1 = a.wechat_memo
					}
					let name2;
					if (b.src == "0") {
						name2 = b.phone_nm
					} else if (b.wechat_memo == "" || b.wechat_memo == null) {
						name2 = b.wechat_nm
					} else {
						name2 = b.wechat_memo
					}
					if (!isNaN(Number(name1.substring(0, 1)))) {
						name1 = "Z";
					}
					if (!isNaN(Number(name2.substring(0, 1)))) {
						name2 = "Z";
					}
					let PinYin1 = ConvertPinyin(name1).substring(0, 1);
					let PinYin2 = ConvertPinyin(name2).substring(0, 1);
					if (/^[a-z]+$/.test(PinYin1)) {
						PinYin1 = PinYin1.toUpperCase();
					}
					if (/^[a-z]+$/.test(PinYin2)) {
						PinYin2 = PinYin2.toUpperCase();
					}
					return PinYin1 > PinYin2 ? 1 : -1;

				});
				var dataarr_parse2 = {
					DATASET
				};
				let keySearchData = localStorage.getItem("keySearchData");
				var inpt2 = document.getElementById('inpt');
				if (keySearchData != null && inpt2.value != "") { //如果搜索框和搜索的本地数据不为空,则再次调用keySearch方法使用ajax获取的数据进行搜索框筛选渲染
					// data = JSON.parse(keySearchData).DATASET;
					keySearch(dataarr_parse2.DATASET);
				} else {
					setData(dataarr_parse2, "getData");
				}
			}
		
			// openNew("customerDiagnosis.html");
			// closeMask();



			let obj = document.getElementById("mask");
			// obj.addEventListener("click", showmore);
			let yn = 0;
			// document.getElementById("openMask").addEventListener("tap", function() {
			// 	showmore();
			// })
			document.getElementById("mask").addEventListener("touchstart", function() {
				closeMask();
			})

			document.getElementById("mask2").addEventListener("touchstart", function() {
				event.preventDefault();
				document.getElementById("paixubox").style.transform = "translateY(-2rem)";
				setTimeout(function() {
					document.getElementById("mask2").style.display = "none";
				}, 200);
				isdj = 0;
			});
			document.getElementById("mask2").addEventListener("click", function() {
				document.getElementById("paixubox").style.transform = "translateY(-2rem)";
				document.getElementById("mask2").style.display = "none";
			})
		</script>
	</body>

</html>
